<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;width: 90px;">用户/手机:</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="mobile" placeholder="" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 0px;width: 100px;">邀请人手机号:</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="refereesandmobile" placeholder="" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 15px;width:60px;">性别:</el-col>
			<el-col :span="2">
				<el-select v-model="sex" placeholder="请选择" size="small" style="width: 100px;">
					<el-option value="" :label="seleAll"></el-option>
					<el-option label="男" value="1"></el-option>
					<el-option label="女" value="2"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 15px;width:60px;">状态:</el-col>
			<el-col :span="2">
				<el-select v-model="status" placeholder="请选择" size="small" style="width: 100px;">
					<el-option value="" :label="seleAll"></el-option>
					<el-option key="1" label="待审核" value="1"></el-option>
					<el-option key="2" label="已审核" value="2"></el-option>
					<el-option key="3" label="拒绝" value="3"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="2" style="margin-top: 5px;padding-left: 5px;">申请时间:</el-col>
			<el-col :span="6" style="margin-top: -3px;">
				<el-date-picker v-model="stime" type="datetimerange" range-separator="至 " start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 5px;margin-left:80px;">生日:</el-col>
			<el-col :span="6" style="margin-top: -3px;">
				<el-date-picker v-model="birTimes" type="datetimerange" range-separator="至 " start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			<el-col :span="6" style="margin-right: 10px;">
				<el-button type="warning" icon="el-icon-search" size="small" @click="search">查找</el-button>
				<el-button type="warning" size="small" @click="dealList(2)" v-if="dealShow!==-1">批量通过</el-button>
				<el-button type="warning" size="small" @click="dealList(3)" v-if="dealShow!==-1">批量拒绝</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width:100%;margin-bottom:10px;" @selection-change="handleSelectionChange">
			<el-tableref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="id" label="id" width="90"></el-table-column>
				<el-table-column prop="mobile" label="手机号" width="110"></el-table-column>
				<el-table-column prop="name" label="姓名" width="90"></el-table-column>
				<el-table-column prop="nickName" label="昵称" width="140">
					<template slot-scope="scope">
						<img :src="scope.row.avatar" style="width: 30px;height: 30px;" v-if=""></br>
						<label>{{scope.row.nickName}}</label>
					</template>
				</el-table-column>
				<el-table-column prop="wechatnum" label="微信号" width="100"></el-table-column>
				<el-table-column prop="birthday" label="生日" width="160" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="sex" label="性别" width="50">
					<template slot-scope="scope">
						<label v-if="scope.row.sex==1">男</label>
						<label v-if="scope.row.sex==2">女</label>
					</template>
				</el-table-column>
				<el-table-column prop="province" label="地区" width="140">
					<template slot-scope="scope">
						<label>{{scope.row.province}}-{{scope.row.city}}-{{scope.row.district}}</label>
					</template>
				</el-table-column>
				<el-table-column prop="disCreateTime" label="申请时间" width="160" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="disname" label="推荐人" width="90"></el-table-column>
				<el-table-column prop="balance" label="用户余额" width="80"></el-table-column>
				<el-table-column prop="commission" label="已得佣金" width="80"></el-table-column>
				<el-table-column prop="promotenum" label="推广订单" width="80"></el-table-column>
				<el-table-column prop="lowernum" label="下级人数" width="80"></el-table-column>
				<el-table-column prop="status" label="状态" width="60">
					<template slot-scope="scope">
						<label v-if="scope.row.status==1">待审核</label>
						<label v-if="scope.row.status==2">通过</label>
						<label v-if="scope.row.status==3">拒绝</label>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="260">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status==1&&dealShow!==-1" size="mini" type="primary" @click="deal(scope.row.id,2)">通过</el-button>
						<el-button v-if="scope.row.status==1&&dealShow!==-1" size="mini" type="primary" @click="deal(scope.row.id,3)">拒绝</el-button>
						<el-button size="mini" type="primary" @click="showDetail(scope.row.id)">余额明细</el-button>
					</template>
				</el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="Page" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
		<div class="modal fade" id="userDetail" tabindex="-1" role="dialog" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content" style="width:950px;height:540px;">
					<div class="modal-header" style="border-radius: 4px;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
						<ul class="nav nav-tabs return" role="tablist">
							<li role="presentation" class="active">
								<a href="#returnInfo" aria-controls="returnInfo" role="tab" data-toggle="tab">余额明细</a>
							</li>
						</ul>
					</div>
					<div class="modal-body" style="padding-right: 60px;height:470px;overflow: hidden;overflow-y: auto;">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="returnInfo">
								<input type="hidden" name="userId" id="userId" v-model="userId" />
								<el-table :data="userD" border style="width:100%;margin-bottom:10px;">
									<el-table-column type="selection" width="50"></el-table-column>
									<el-table-column prop="id" label="id" width="90"></el-table-column>
									<el-table-column prop="createTime" label="时间" width="160" :formatter="dateFormat"></el-table-column>
									<el-table-column prop="type" label="事项" width="160">
										<template slot-scope="scope">
											<label v-if="scope.row.type==1">佣金结算</label>
											<label v-if="scope.row.type==2">支付渠道商金额</label>
											<label v-if="scope.row.type==3">余额提现</label>
											<label v-if="scope.row.type==4">提现失败</label>
										</template>
									</el-table-column>
									<el-table-column prop="description" label="说明" width="160"></el-table-column>
									<el-table-column prop="money" label="金额" width="80"></el-table-column>
									<el-table-column prop="balance" label="余额"></el-table-column>
								</el-table>
								<el-pagination background @current-change="uchg" :current-page="up" :page-size="us" layout="prev, pager, next,total, slot" :total="ut">
									<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="ui" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="uchg(ui)">跳转</el-button><span>总计{{utp}}页</span></span>
								</el-pagination>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import qs from "qs"
	import axios from "axios"
	export default {
		data() {
			return {
				mobile
: "", //搜索手机号
				refereesandmobile: "", //搜索邀请人手机号
				status: "", //搜索状态
				Page: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				inputPage: 1,
				totalPage: 1,
				sex: "",
				purl: this.$store.state.purl, //权限数组
				stime: [], //搜索时间段
				seleAll: "全部",
				tableData: [],
				birTimes: [],
				multipleSelection: "",
				isDisabled: false,
				updateShow: 0, //是否显示更新信息
				addShow: 0, //是否显示新增
				dealShow: 0,
				sReShow: 0,
				userId: '',
				userD: [],
				up:1,
				ut:1,
				us:0,
				ui:1,
				utp:1
			}
		},
		activated() {
			this.birTimes = [];
			this.mobile= "";
			this.refereesandmobile = "";
			this.status = "";
			this.Page = 1;
			this.totals = 0;
			this.size = 0;
			this.inputPage = 1;
			this.totalPage = 1;
			this.purl = this.$store.state.purl; //权限数组
			this.seleAll = "全部"
			this.tableData = [];
			this.sex = "";
			this.multipleSelection = "";
			this.load(1);
			this.addShow = this.purl[0].findIndex((val) => val === "/interface/dis/update") //判断是否拥有增加权限
			this.updateShow = this.purl[0].findIndex((val) => val === "/interface/dis/update") //判断是否拥有更新权限
			this.dealShow = this.purl[0].findIndex((val) => val === "/interface/dis/examine")
			this.sReShow = this.purl[0].findIndex((val) => val === "/interface/user/selectDisByMobile")
		},
		methods: {
			load(num) {
				axios.get("interface/dis/list?pageNo=" + num).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage;
				})
			},
			dateFormat: function(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			handleCurrentChange(val) {
				var thit = this;
				thit.inputPage = val;
				thit.Page = val
				if(thit.sVal != 0) {
					thit.status = thit.sVal;
				} else {
					thit.status = "";
				}
				var startTime
				var endTime
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				var bTime
				var beTime
				if(this.birTimes != null && this.birTimes.length > 0) {
					bTime = formatDate(this.birTimes[0], 'yyyy-MM-dd hh:mm:ss');
					beTime = formatDate(this.birTimes[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					bTime = "";
					beTime = "";
				}
				axios.post("interface/dis/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					mobile: thit.mobile,
					refereesandmobile: thit.refereesandmobile,
					status: thit.status,
					birthdayStime: bTime,
					birthdayEtime: beTime,
					sex: thit.sex,
					pageNo: val
				})).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.page.totalRow; //总条数
					this.size = res.data.data.page.pageSize; //每页条数
					this.totalPage = res.data.data.page.totalPage;
				})
			},
			search() {
				/*var timeList=.split(",");*/
				var thit = this;
				var startTime
				var endTime
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				var bTime
				var beTime
				if(this.birTimes != null && this.birTimes.length > 0) {
					bTime = formatDate(this.birTimes[0], 'yyyy-MM-dd hh:mm:ss');
					beTime = formatDate(this.birTimes[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					bTime = "";
					beTime = "";
				}
				axios.post("interface/dis/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					mobile: thit.mobile,
					refereesandmobile: thit.refereesandmobile,
					status: thit.status,
					birthdayStime: bTime,
					birthdayEtime: beTime,
					sex: thit.sex,
					pageNo: 1
				})).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.page.totalRow; //总条数
					this.size = res.data.data.page.pageSize; //每页条数
					this.totalPage = res.data.data.page.totalPage;
				})
			},
			deal(id, s) {
				if(s == 2) {
					this.refusedMessage = "";
					axios.post("/interface/dis/examine?ids=" + id + "&status=" + s + "&refusedMessage=" + this.refusedMessage).then((res) => {
						var msg = res.data
						if(msg.code == 1) {
							$("#dic").modal("hide");
							this.$message.success("审核成功");
							this.load(1);
						} else {
							this.$message.success(msg.msg);
						}
					})
				} else {
					$("#dic").modal("hide");
					this.$prompt('拒绝', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
					}).then(({
						value
					}) => {
						this.refusedMessage = value;
						axios.post("/interface/dis/examine?ids=" + id + "&status=" + s + "&refusedMessage=" + this.refusedMessage).then((res) => {
							var msg = res.data
							if(msg.code == 1) {
								$("#dic").modal("hide");
								this.$message.success("拒绝成功");
								this.load(1);
							} else {
								this.$message.success(msg.msg);
							}
						})
						this.$message({
							type: 'success',
							message: value
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
				}

			},
			handleSelectionChange(val) {
				var strId = "";
				for(var i = 0; i < val.length; i++) {
					if(val[i].status == 1) {
						strId += val[i].id + ",";
					}
				}
				strId = strId.slice(0, strId.length - 1);
				this.multipleSelection = strId;
			},
			dealList(stu) {
				var ids = this.multipleSelection;
				if(stu == 2) {
					this.refusedMessage = "";
					axios.post("/interface/dis/examine?ids=" + ids + "&status=" + stu + "&refusedMessage=" + this.refusedMessage).then((res) => {
						var msg = res.data
						if(msg.code == 1) {
							$("#dic").modal("hide");
							this.$message.success("审核成功");
							this.load(1);
						} else {
							this.$message.success(msg.msg);
						}
					})
				} else {
					this.$prompt('拒绝', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
					}).then(({
						value
					}) => {
						this.refusedMessage = value;
						axios.post("/interface/dis/examine?ids=" + ids + "&status=" + stu + "&refusedMessage=" + this.refusedMessage).then((res) => {
							var msg = res.data
							if(msg.code == 1) {
								$("#dic").modal("hide");
								this.$message.success("拒绝成功");
								this.load(1);
							} else {
								this.$message.success(msg.msg);
							}
						})
						this.$message({
							type: 'success',
							message: value
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						});
					});
				}

			},
			showDetail(id) {
				$("#userDetail").modal('show');
				this.userId=id;
				this.uload(1,id)
			},
			uload(num,userId) {
				axios.get("/interface/dis/balancelist?pageNo=" + num+"&userId="+userId).then((res) => {
					this.userD = res.data.data.list;
					this.ut = res.data.data.pageBean.totalRow; //总条数
					this.us = res.data.data.pageBean.pageSize; //每页条数
					this.utp = res.data.data.pageBean.totalPage;
				})
			},
			uchg(val){
				this.ui = val;
				this.up = val
				this.uload(val,this.userId)
			}

		}
	}
</script>

<style>
	#distri .el-form-item {
		margin-bottom: 0px;
	}
	#userDetail .modal-dialog {
		left:30% !important;
		top: 10% !important;
	}
	.el-picker-panel {
		z-index: 10056 !important;
	}
	
	.el-cascader-menus {
		z-index: 10056 !important;
	}
	
	.el-notification {
		z-index: 10056 !important;
	}
</style>